<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <title>Title</title>
  </head>
  <body>
    <div id="box">
      {{ msg }}
      <input v-model="name">
      <input v-model="name">
      <input v-model="name">
      {{ msg1 }}
      {{ msg2 }}
      {{ arr }}
      <ul>
      <li v-for="item in arr">{{ item }}</li>
      </ul>
      {{json}}
      <input v-model="shut" v-show="msg2">
      <button v-on:click="addShut">添加</button>
      <button v-on:click="hiddenShut">切换shut</button>
      <p v-for="(k,v) in json">{{k}} --  {{v}}</p>
    </div>
    <script>
      var app = new Vue({
        el: '#box',
        data: {
          msg: 'welcome vue',
          name: 'welcome',
          msg1:12,
          msg2:true,
          shut:'',
          arr:['apple','bananer','orange'],
          json:{a:'apple',b:'bananer',c:'orange'}
        },
        methods: {
          makeClick: function(){
            alert(111);
          },
          addShut: function(){
            if(this.shut.length != 0){
              this.arr.push(this.shut);
              this.shut = '';
            }
          },
          hiddenShut: function() {
            this.msg2 = this.msg2==true?false:true;
          }
        }
      })
    </script>
  </body>
</html>
